<template>
  <ul class="warningLevelLegend" :style="{ left, bottom }">
    <li>5年一遇</li>
    <li>10年一遇</li>
    <li>20年一遇</li>
    <li>50年一遇</li>
    <li>100年一遇</li>
  </ul>
</template>

<script lang="ts" setup>
  defineOptions({ name: 'WarningLevelLegend' });

  defineProps({
    right: {
      type: String,
      default: '10px',
    },
    bottom: {
      type: String,
      default: '250px',
    },
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .warningLevelLegend {
    width: 80px;
    position: absolute;
    right: 20px;
    bottom: 20%;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      color: #fff;
      border-radius: 6px;
      margin-bottom: 4px;
    }
    li:nth-child(1) {
      background: #0e7df3;
    }
    li:nth-child(2) {
      background: #eec843;
    }
    li:nth-child(3) {
      background: #e99b16;
    }
    li:nth-child(4) {
      background: #f92949;
    }
    li:nth-child(5) {
      background: #8966ce;
    }
  }
</style>
